{% extends "base.html" %}

{% block title %}Twitter list{% endblock %}

{% block content %}
    <article id="main" class="markdown-section">
	<h1>Twitter list</h1>
        <div class="table-responsive">
            <table id="table" class="table" style="display:table; table-layout:auto; width:100%">
            <thead>
                <tr>
                    <th style="width:20%"> Name </th>
                    <th style="width:20%"> Display Name </th>
                    <th> Description </th>
                    <th style="width:10%"> <center>Screen </center></th>
                </tr>
            </thead>
            <tbody>
        {% for entry in data %}
            <tr>
               <td><a href="/twitter/{{entry['name']}}">{{entry['name']}}</a></td>
               <td>{{ entry['displayname'] }}</td>
               <td>{{ entry['meta'] }}</td>
               {% if 'screen' in entry %}
               <td><a href="{{ entry['screen'] }}" rel="noopener noreferrer" target="_blank"">Screen</a></td>
               {% else %}
               <td></td>
               {% endif %}
            </tr>
        {% endfor %}
            </tbody>
            </table>
        </div>
    </article>
{% endblock %}
